<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import Aoi from './components/aoi.vue';
import Avi from './components/avi.vue';

const prodNo = defineModel('prodNo', { type: String, default: 'hp4a77005a1  3级标准' });
const site = ref('Inner1');
const aoiRef = ref(null);
const aoiOuter1Ref = ref(null);
const aviRef = ref(null);
const jcAviRef = ref(null);

const siteList = [
  { value: 'Inner1', label: '鹰眼AOI采集(内)', icon: 'icon-AOIzhuisu' },
  { value: 'outer1', label: '鹰眼AOI采集(外)', icon: 'icon-AOI-zhuisu-other' },
  { value: 'avi', label: '载力AVI设备采集', icon: 'icon-AVIzhuisu' },
  { value: 'jcAvi', label: '九川AVI设备采集', icon: 'icon-jiuchuanAVIzhuisu' }
];

function getData() {
  nextTick(() => {
    aoiRef.value.getTableData();
    aoiOuter1Ref.value.getTableData();
    aviRef.value.getTableData();
    jcAviRef.value.getTableData();
  });
}

function reset() {
  aoiRef.value?.reset();
  aoiOuter1Ref.value?.reset();
  aviRef.value?.reset();
  jcAviRef.value?.reset();
}

defineExpose({
  getData,
  reset
});
</script>

<template>
  <div class="four-inspection-sites">
    <div class="search mb-8px">
      <ARadioGroup v-model:value="site" button-style="solid">
        <ARadioButton v-for="item in siteList" :key="item.value" :value="item.value">
          <i class="iconfont" :class="item.icon"></i>
          {{ item.label }}
        </ARadioButton>
      </ARadioGroup>
    </div>
    <div class="inspection">
      <Aoi v-show="site === 'Inner1'" ref="aoiRef" v-model:prodNo="prodNo" type="Inner1" />
      <Aoi v-show="site === 'outer1'" ref="aoiOuter1Ref" v-model:prodNo="prodNo" type="outer1" />
      <Avi v-show="site === 'avi'" ref="aviRef" v-model:prodNo="prodNo" type="avi" />
      <Avi v-show="site === 'jcAvi'" ref="jcAviRef" v-model:prodNo="prodNo" type="jcAvi" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.four-inspection-sites {
  padding-top: 10px;
  height: 100%;
  .inspection {
    height: calc(100% - 40px);
    margin-right: 0 !important;
    overflow-y: auto;
  }
}
</style>
